<div class="crud_category">
  <h1>Создание категорий</h1>
  <div class="controll_panel">
    <div id="create_button">Создать</div>
  </div>
  <div id="list_item">
  </div>
 </div>
<script>
  $(document).ready(function(){
    function createForm(param,data){
      switch(param){
        case 'createCategory':
           buildCreateForm();
        break;
        case 'editCategory':
            buildEditForm(data);
        break;
      }
    }
    function buildCreateForm(){
       $.getJSON('<?php echo base_url();?>category/read/',function(json){
         var string  ='';
         string += '<div id="view_container">';
         string += '<div id="view_edit_close" style="width: 30px; height: 30px; background: green;left: 270px; position: relative;"></div>';
         string += '<div id="view_edit" style="width: 300px; height: 300px; background: grey;">';
         string += '<div id="preloader"><img src="<?php echo base_url();?>img/preloader.gif"></div>';
         string += '<form id="create_category_form" action="<?php echo base_url();?>category/create/" method="post" style="display: none;">';
         string += '<input type="text" name="name" placeholder="Название категории">'; 
         string += '<select name="parent">';
         string += '<option value="0">-</option>';
         $.each(json, function(key,data){
           string += '<option value="'+data.id+'">'+data.name+'</option>';
         });
         string +='</select><input id="submit" type="submit" value="Отправить"></form>';
         string += '</div>';
         $('body').append(string);
         
         //прячем прелодер
         $('#preloader').hide();
         // показываем форму
         $('#create_category_form').show();
         //ловим событие отправки сообщения
         $('#create_category_form').submit(function (event){
            // отменяем стандартную отправку данных
            event.preventDefault();
            $('#create_category_form').hide();
            $('#preloader').show();
            var posting =  $.post('<?php echo base_url();?>category/create/', $("#create_category_form").serialize());
            posting.done(function (data){
            $('#preloader').hide();
            var anser = JSON.parse(data);
            if(anser.code){
              $('#view_container').remove();
              buildCreateForm();
              clearList();
              getCategory();
            }
          });
         });
         
         $('#view_edit_close').click(function(){
            //clearViewEdit();
         $('#view_container').remove();
         });
      });      
    }
    function buildEditForm(param){
    $.getJSON('<?php echo base_url();?>category/read/',function(json){
         var select= '';
         var string  ='';
         string += '<div id="view_container">';
         string += '<div id="view_edit_close" style="width: 30px; height: 30px; background: green;left: 270px; position: relative;"></div>';
         string += '<div id="view_edit" style="width: 300px; height: 300px; background: grey;">';
         string += '<div id="preloader"><img src="<?php echo base_url();?>img/preloader.gif"></div>';
         string += '<form id="create_category_form" action="<?php echo base_url();?>category/update/" method="post" style="display: none;">';
         string += '<input type="hidden" name="id"  value="'+param.id+'">'; 
         string += '<input type="text" name="name" placeholder="Название категории" value="'+param.name+'">'; 
         string += '<select name="parent">';
         string += '<option value="0">-</option>';
         $.each(json, function(key,data){
           if(param.parent == data.id){select='selected';}
           else {select='';}
           if(param.id != data.id){
             string += '<option value="'+data.id+'" '+select+'>'+data.name+'</option>';
           }
         });
         string +='</select><input id="submit" type="submit" value="Отправить"></form>';
         string += '</div>';
         $('body').append(string);
         //прячем прелодер
         $('#preloader').hide();
         // показываем форму
         $('#create_category_form').show();
         //ловим событие отправки сообщения
         $('#create_category_form').submit(function (event){
            // отменяем стандартную отправку данных
            event.preventDefault();
            $('#create_category_form').hide();
            $('#preloader').show();
            var posting =  $.post('<?php echo base_url();?>category/update/', $("#create_category_form").serialize());
            posting.done(function (data){
            $('#preloader').hide();
            var anser = JSON.parse(data);
            if(anser.code){
              $('#view_container').remove();
              clearList();
              getCategory();
            }
          });
         });
         
         $('#view_edit_close').click(function(){
            //clearViewEdit();
         $('#view_container').remove();
         });
      });
    }
    function clearList(){
      $('#list_item').html('');
    }    
    function getCategory(){
    $.getJSON('<?php echo base_url();?>category/read/',function(json){
      var string = '<table>';
        string += ' <th>ID</th>';
        string += '<th>Название</th>';
        string += '<th>Родитель</th></thead><tbody>';
      $.each(json,function(key,data){
        string += '<tr class="row">';
        string += '<td class="id">'+data.id+'</td>';
        string += '<td class="name">'+data.name+'</td>';
        string += '<td class="parent">'+data.parent+'</td>';
        string +='<td class="edit" data-parent="'+data.parent+'" data-name="'+data.name+'" data-id="'+data.id+'">Edit</td>';
        string +='<td class="delete" data-item="'+data.id+'">Delete</td></tr>';
      });
      string += '</tbody></table>';
      $('#list_item').html('');
      $('#list_item').append(string);
      $(".edit").click(function(){
         var param = {
              id:$(this).data('id'),
              parent: $(this).data('parent'),
              name: $(this).data('name')
          };
        createForm('editCategory', param);
      });
      
      $(".delete").click(function(){
          $('#view_container').remove();
        var posting =  $.post('<?php echo base_url();?>category/delete/', {id:''+$(this).data('item')});
            posting.done(function (data){
            var anser = JSON.parse(data);
            if(anser.code){    
              clearList();
              getCategory();
              
            }
          });
      });
     });
    }

  getCategory();
  $("#create_button").click(function(){
    createForm('createCategory');
  });
});
</script>